<template>
    <div style="z-index:1;height: 500px; padding-top: 5px; position: relative;">
        <el-empty v-if="emptyVisible" :description="$t('common.empty_tip')"/>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/mixins/resize'

export default {
  name: 'tomsNewApplicationDownloadTrendChart',
  mixins: [resize],
  data () {
    return {
      series: [],
      chart: null,
      emptyVisible: false,
      legend: [],
      xAxisData: [],
      groupData: [],
      drilldownData: []
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initData('Day', 7)
    })
  },
  methods: {
    initData (dateUnit, timeRange) {
      this.xAxisData = ['Animals', 'Fruits', 'Cars']
      this.groupData = [
        {
          value: 5,
          groupId: 'animals'
        },
        {
          value: 2,
          groupId: 'fruits'
        },
        {
          value: 4,
          groupId: 'cars'
        }
      ]
      this.drilldownData = [
        {
          dataGroupId: 'animals',
          data: [
            ['Cats', 4],
            ['Dogs', 2],
            ['Cows', 1],
            ['Sheep', 2],
            ['Pigs', 1]
          ]
        },
        {
          dataGroupId: 'fruits',
          data: [
            ['Apples', 4],
            ['Oranges', 2]
          ]
        },
        {
          dataGroupId: 'cars',
          data: [
            ['Toyota', 4],
            ['Opel', 2],
            ['Volkswagen', 2]
          ]
        }
      ]
      this.initChart()
    },
    initChart () {
      const chart = echarts.init(this.$el)
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          dataName: '种类',
          data: this.xAxisData
        },
        yAxis: {
        },
        dataGroupId: '',
        legend: {
          // data: [this.$t('data_center.toms_app_total_count')]
          data: ['Number of new application downloads in the TOMS']
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {
              show: true,
              readOnly: true,
              title: 'Data View',
              lang: ['Data View', `<span id="${this.$options.name}">Close</span>`, 'Refresh'],
              optionToContent: function (opt) {
                var axisData = opt.xAxis[0].data
                var series = opt.series
                var dataName = opt.xAxis[0].dataName
                var tdHeads = '<td  style="padding:0 10px">' + dataName + '</td>'
                series.forEach(function (item) {
                  tdHeads += '<td style="padding: 0 10px">' + item.name + '</td>'
                })
                var table = '<table id="dataView" border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center;width:95%;height:100%"><tbody><tr>' + tdHeads + '</tr>'
                var tdBodys = ''
                for (var i = 0, l = axisData.length; i < l; i++) {
                  for (var j = 0; j < series.length; j++) {
                    if (typeof (series[j].data[i]) === 'object') {
                      tdBodys += '<td>' + series[j].data[i].value + '</td>'
                    } else {
                      tdBodys += '<td>' + series[j].data[i] + '</td>'
                    }
                  }
                  table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>'
                  tdBodys = ''
                }
                table += '</tbody></table>'
                return table
              },
              contentToOption: function (opt) {
                console.log(opt)
              }
            },
            magicType: {
              show: true,
              title: {line: 'Toggle - Line Chart', bar: 'Toggle - Column Chart'},
              type: ['line', 'bar']
            },
            restore: {show: true, title: 'Restore'},
            saveAsImage: {show: true, title: 'Save Image'}
          }
        },
        series: {
          type: 'bar',
          id: 'sales',
          name: '数量',
          data: this.groupData,
          universalTransition: {
            enabled: true,
            divideShape: 'clone'
          }
        }
      }
      const drilldownData = this.drilldownData
      chart.on('click', function (event) {
        if (event.data) {
          var groupId = event.data.groupId
          var subData = drilldownData.find(function (data) {
            return data.dataGroupId === event.data.groupId
          })
          if (!subData) {
            return
          }
          chart.setOption({
            tooltip: {
              trigger: 'axis'
            },
            xAxis: {
              dataName: groupId,
              data: subData.data.map(function (item) {
                return item[0]
              })
            },
            legend: {
              // data: [this.$t('data_center.toms_app_total_count')]
              // data: ['value']
            },
            series: {
              name: 'value',
              type: 'bar',
              id: 'sales',
              dataGroupId: subData.dataGroupId,
              data: subData.data.map(function (item) {
                return item[1]
              }),
              universalTransition: {
                enabled: true,
                divideShape: 'clone'
              }
            },
            graphic: [
              {
                type: 'text',
                left: 50,
                top: 2,
                style: {
                  text: 'Back',
                  fontSize: 18
                },
                onclick: function () {
                  chart.setOption(option, true)
                }
              }
            ]
          })
        }
      })
      chart.setOption(option)
    }
  }
}
</script>

<style>
</style>
